[V0_FILE]typescriptreact:file="components/slash-command.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@/components/ui/command" import { Text, Heading1, Heading2, Heading3, List, ListOrdered, Code, CheckSquare } from "lucide-react" interface SlashCommandProps { editor: any isOpen: boolean setIsOpen: (isOpen: boolean) => void position: { x: number; y: number } closeSlashCommand: () => void } const items = [ { title: "Text", description: "Just start writing with plain text.", icon: Text, command: (editor: any) => { editor.chain().focus().setParagraph().run() }, }, { title: "Heading 1", description: "Big section heading.", icon: Heading1, command: (editor: any) => { editor.chain().focus().toggleHeading({ level: 1 }).run() }, }, { title: "Heading 2", description: "Medium section heading.", icon: Heading2, command: (editor: any) => { editor.chain().focus().toggleHeading({ level: 2 }).run() }, }, { title: "Heading 3", description: "Small section heading.", icon: Heading3, command: (editor: any) => { editor.chain().focus().toggleHeading({ level: 3 }).run() }, }, { title: "Bullet List", description: "Create a simple bullet list.", icon: List, command: (editor: any) => { editor.chain().focus().toggleBulletList().run() }, }, { title: "Numbered List", description: "Create a numbered list.", icon: ListOrdered, command: (editor: any) => { editor.chain().focus().toggleOrderedList().run() }, }, { title: "To-do List", description: "Track tasks with a to-do list.", icon: CheckSquare, command: (editor: any) => { editor.chain().focus().toggleTaskList().run() }, }, { title: "Code Block", description: "Add a code block with syntax highlighting.", icon: Code, command: (editor: any) => { editor.chain().focus().toggleCodeBlock().run() }, }, ] export function SlashCommand({ editor, isOpen, setIsOpen, position, closeSlashCommand }: SlashCommandProps) { const [selectedIndex, setSelectedIndex] = React.useState(0) const [query, setQuery] = React.useState("") const commandRef = React.useRef(null) const filteredItems = items.filter((item) => item.title.toLowerCase().includes(query.toLowerCase())) const selectItem = React.useCallback( (item: (typeof items)[number]) => { item.command(editor) closeSlashCommand() setQuery("") }, [editor, closeSlashCommand], ) React.useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (!isOpen) return if (e.key === "ArrowUp") { e.preventDefault() setSelectedIndex((prevIndex) => (prevIndex - 1 + filteredItems.length) % filteredItems.length) } else if (e.key === "ArrowDown") { e.preventDefault() setSelectedIndex((prevIndex) => (prevIndex + 1) % filteredItems.length) } else if (e.key === "Enter") { e.preventDefault() selectItem(filteredItems[selectedIndex]) } else if (e.key === "Escape") { e.preventDefault() closeSlashCommand() } } document.addEventListener("keydown", handleKeyDown) return () => { document.removeEventListener("keydown", handleKeyDown) } }, [isOpen, selectItem, filteredItems, selectedIndex, closeSlashCommand]) React.useEffect(() => { setSelectedIndex(0) }, []) React.useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (commandRef.current && !commandRef.current.contains(event.target as Node)) { closeSlashCommand() } } if (isOpen) { document.addEventListener("mousedown", handleClickOutside) } return () => { document.removeEventListener("mousedown", handleClickOutside) } }, [isOpen, closeSlashCommand]) if (!isOpen) return null return (

No results found. {filteredItems.map((item, index) => ( selectItem(item)} className={`flex items-center gap-2 p-2 ${index === selectedIndex ? "bg-accent" : ""}`} >

{item.title}

{item.description}

))}

) } [V0_FILE]css:file="styles/editor.css" isEdit="true" isMerged="true" .ProseMirror { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; line-height: 1.5; color: hsl(var(--foreground)); padding: 1rem; } /* Content editor styles */ .content-editor { min-height: calc(100vh - 15rem); } .ProseMirror > * + * { margin-top: 0.75em; } .ProseMirror h1 { font-size: 1.875em; font-weight: 600; line-height: 1.2; margin: 1.5em 0 0.5em; color: hsl(var(--foreground)); } .ProseMirror h2 { font-size: 1.5em; font-weight: 600; line-height: 1.25; margin: 1.25em 0 0.5em; color: hsl(var(--foreground)); } .ProseMirror h3 { font-size: 1.25em; font-weight: 600; line-height: 1.3; margin: 1em 0 0.5em; color: hsl(var(--foreground)); } .ProseMirror h4 { font-size: 1.125em; font-weight: 600; line-height: 1.35; margin: 0.75em 0 0.5em; color: hsl(var(--foreground)); } .ProseMirror p { margin: 0.5em 0; line-height: 1.6; } .ProseMirror ul, .ProseMirror ol { margin: 0.5em 0; padding-left: 1.5em; } .ProseMirror li { margin: 0.25em 0; } .ProseMirror li > p { margin: 0; } .ProseMirror pre { background-color: hsl(var(--muted)); border-radius: 0.25em; padding: 0.75em; margin: 0.75em 0; overflow-x: auto; font-size: 0.875em; } .ProseMirror code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.875em; padding: 0.2em 0.4em; border-radius: 0.25em; background-color: hsl(var(--muted)); } .ProseMirror blockquote { margin: 0.75em 0; padding-left: 1em; border-left: 3px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); font-style: italic; } /* Placeholder styles */ .ProseMirror .is-node-empty:first-child::before { content: attr(data-placeholder); float: left; color: hsl(var(--muted-foreground)); pointer-events: none; height: 0; } .ProseMirror .is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; color: hsl(var(--muted-foreground)); pointer-events: none; height: 0; } /* Additional styles for better visual hierarchy */ .ProseMirror strong { font-weight: 600; } .ProseMirror em { font-style: italic; } .ProseMirror u { text-decoration: underline; } .ProseMirror hr { border: none; border-top: 2px solid hsl(var(--border)); margin: 2em 0; } .ProseMirror a { color: hsl(var(--primary)); text-decoration: underline; } .ProseMirror a:hover { color: hsl(var(--primary-foreground)); } /* Table styles */ .ProseMirror table { border-collapse: collapse; margin: 0.75em 0; width: 100%; } .ProseMirror th, .ProseMirror td { border: 1px solid hsl(var(--border)); padding: 0.5em; } .ProseMirror th { background-color: hsl(var(--muted)); font-weight: 600; } [V0_FILE]typescriptreact:file="components/toolbar.tsx" isEdit="true" isMerged="true" import { Bold, Italic, Underline, Heading1, Heading2, List, ListOrdered } from "lucide-react" import { Toggle } from "@/components/ui/toggle" interface ToolbarProps { editor: any } export function Toolbar({ editor }: ToolbarProps) { if (!editor) { return null } return (

editor.chain().focus().toggleBold().run()} aria-label="Toggle bold" > editor.chain().focus().toggleItalic().run()} aria-label="Toggle italic" > editor.chain().focus().toggleUnderline().run()} aria-label="Toggle underline" > editor.chain().focus().toggleHeading({ level: 1 }).run()} aria-label="Toggle heading 1" > editor.chain().focus().toggleHeading({ level: 2 }).run()} aria-label="Toggle heading 2" > editor.chain().focus().toggleBulletList().run()} aria-label="Toggle bullet list" > editor.chain().focus().toggleOrderedList().run()} aria-label="Toggle ordered list" >

) } [V0_FILE]typescript:file="lib/api.ts" isEdit="true" isMerged="true" interface Document { id: string title: string content: string createdAt: Date updatedAt: Date versions: { timestamp: Date title: string content: string }[] } // In-memory storage let documents: Document[] = [] export const api = { // Create a new document createDocument: (title: string, content: string): Document => { const newDoc: Document = { id: Date.now().toString(), title, content, createdAt: new Date(), updatedAt: new Date(), versions: [ { timestamp: new Date(), title, content, }, ], } documents.push(newDoc) return newDoc }, // Read all documents getAllDocuments: (): Document[] => { return documents }, // Read a single document getDocument: (id: string): Document | undefined => { return documents.find((doc) => doc.id === id) }, // Update a document updateDocument: (id: string, title: string, content: string): Document | undefined => { const docIndex = documents.findIndex((doc) => doc.id === id) if (docIndex !== -1) { const updatedDoc = { ...documents[docIndex], title, content, updatedAt: new Date(), } updatedDoc.versions.push({ timestamp: new Date(), title, content, }) documents[docIndex] = updatedDoc return updatedDoc } return undefined }, // Delete a document deleteDocument: (id: string): boolean => { const initialLength = documents.length documents = documents.filter((doc) => doc.id !== id) return documents.length < initialLength }, // Get document versions getDocumentVersions: (id: string): Document["versions"] | undefined => { const doc = documents.find((doc) => doc.id === id) return doc?.versions }, // Restore document to a specific version restoreDocumentVersion: (id: string, timestamp: Date): Document | undefined => { const docIndex = documents.findIndex((doc) => doc.id === id) if (docIndex !== -1) { const version = documents[docIndex].versions.find((v) => v.timestamp.getTime() === timestamp.getTime()) if (version) { const restoredDoc = { ...documents[docIndex], title: version.title, content: version.content, updatedAt: new Date(), } restoredDoc.versions.push({ timestamp: new Date(), title: version.title, content: version.content, }) documents[docIndex] = restoredDoc return restoredDoc } } return undefined }, } [V0_FILE]typescriptreact:file="components/document-editor.tsx" isEdit="true" isMerged="true" "use client" import React from "react" import { useEditor, EditorContent } from "@tiptap/react" import StarterKit from "@tiptap/starter-kit" import Underline from "@tiptap/extension-underline" import Placeholder from "@tiptap/extension-placeholder" import { Toolbar } from "./toolbar" import { SlashCommand } from "./slash-command" import "../styles/editor.css" import debounce from "lodash/debounce" import { useToast } from "@/components/ui/use-toast" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface DocumentEditorProps { initialContent?: string onContentChange?: (content: string) => void onSave?: (content: string) => Promise } const templates = { blank: { content: "" }, note: { content: "

Quick Note

Jot down your thoughts here...

" }, meeting: { content: "

Meeting Notes

Attendees

Agenda

Action Items

", }, documentation: { content: "

Documentation

Overview

Getting Started

Features

", }, } export function DocumentEditor({ initialContent = "", onContentChange, onSave }: DocumentEditorProps) { const [isSlashCommandOpen, setIsSlashCommandOpen] = React.useState(false) const [slashCommandPosition, setSlashCommandPosition] = React.useState({ x: 0, y: 0 }) const [isSaving, setIsSaving] = React.useState(false) const [viewMode, setViewMode] = React.useState<"note" | "doc">("note") const { toast } = useToast() const debouncedSave = React.useCallback( debounce(async (content: string) => { if (onSave) { setIsSaving(true) try { await onSave(content) toast({ title: "Changes saved", description: "Your document has been automatically saved.", }) } catch (error) { toast({ title: "Error saving changes", description: "There was a problem saving your document. Please try again.", variant: "destructive", }) } finally { setIsSaving(false) } } }, 2000), [], ) const editor = useEditor({ extensions: [ StarterKit, Underline, Placeholder.configure({ placeholder: ({ node }) => { if (node.type.name === "heading") { return `Heading ${node.attrs.level}` } return "Type '/' for commands" }, emptyEditorClass: "is-editor-empty", emptyNodeClass: "is-node-empty", showOnlyWhenEditable: true, includeChildren: true, }), ], content: initialContent, editorProps: { attributes: { class: "content-editor prose prose-lg focus:outline-none max-w-full", }, }, onUpdate: ({ editor }) => { const newContent = editor.getHTML() onContentChange?.(newContent) debouncedSave(newContent) }, }) React.useEffect(() => { if (!editor) return const handleSlash = (e: KeyboardEvent) => { if (e.key === "/" && !isSlashCommandOpen) { e.preventDefault() const { view } = editor const { top, left } = view.coordsAtPos(view.state.selection.from) const editorBounds = view.dom.getBoundingClientRect() setSlashCommandPosition({ x: left - editorBounds.left, y: top - editorBounds.top + 24, }) setIsSlashCommandOpen(true) } } const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "s" && (e.metaKey || e.ctrlKey)) { e.preventDefault() debouncedSave.flush() } } editor.view.dom.addEventListener("keydown", handleSlash) document.addEventListener("keydown", handleKeyDown) return () => { editor.view.dom.removeEventListener("keydown", handleSlash) document.removeEventListener("keydown", handleKeyDown) } }, [editor, isSlashCommandOpen, debouncedSave]) const closeSlashCommand = React.useCallback(() => { setIsSlashCommandOpen(false) }, []) const applyTemplate = (templateName: keyof typeof templates) => { const template = templates[templateName] editor?.commands.setContent(template.content) } if (!editor) { return null } return (

{isSaving && (

Saving...

)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import React from "react" import { DocumentEditor } from "@/components/document-editor" import { DocumentSidebar } from "@/components/document-sidebar" import { Button } from "@/components/ui/button" import { Menu } from "lucide-react" import { api } from "@/lib/api" import { Toaster } from "@/components/ui/toaster" export default function EditorLayout() { const [isSidebarOpen, setSidebarOpen] = React.useState(true) const [currentDocId, setCurrentDocId] = React.useState(null) const [documents, setDocuments] = React.useState(api.getAllDocuments()) const [isLoading, setIsLoading] = React.useState(false) const handleDocumentSelect = (id: string) => { setIsLoading(true) setCurrentDocId(id) // Simulate loading delay setTimeout(() => setIsLoading(false), 500) } const handleContentChange = (newContent: string) => { if (currentDocId) { const currentDoc = api.getDocument(currentDocId) if (currentDoc) { const title = extractTitle(newContent) || currentDoc.title api.updateDocument(currentDocId, title, newContent) setDocuments(api.getAllDocuments()) } } } const handleSave = async (content: string) => { if (currentDocId) { const currentDoc = api.getDocument(currentDocId) if (currentDoc) { const title = extractTitle(content) || currentDoc.title const updatedDoc = api.updateDocument(currentDocId, title, content) setDocuments(api.getAllDocuments()) if (updatedDoc) { setCurrentDocId(updatedDoc.id) } } } } const handleDocumentRename = (id: string, newTitle: string) => { const doc = api.getDocument(id) if (doc) { api.updateDocument(id, newTitle, doc.content) setDocuments(api.getAllDocuments()) } } const handleDocumentDelete = (id: string) => { if (api.deleteDocument(id)) { setDocuments(api.getAllDocuments()) if (currentDocId === id) { setCurrentDocId(null) } } } const currentDoc = currentDocId ? api.getDocument(currentDocId) : null // Helper function to extract title from content const extractTitle = (content: string): string => { const parser = new DOMParser() const doc = parser.parseFromString(content, "text/html") const h1 = doc.querySelector("h1") return h1 ? h1.textContent || "" : "" } return (

{/* Sidebar */} {/* Main Content */}

{currentDoc &&

{currentDoc.title}

}

{isLoading ? (

) : currentDoc ? ( ) : (

Select a document or create a new one to start editing.

)}

) } [V0_FILE]typescriptreact:file="components/document-sidebar.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Search, Home, Inbox, ChevronDown, X, Plus, File, Edit2, Trash2, Tag, Folder } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { api } from "@/lib/api" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" interface DocumentSidebarProps { isSidebarOpen: boolean setSidebarOpen: (open: boolean) => void onDocumentSelect: (id: string) => void documents: ReturnType onDocumentRename: (id: string, newTitle: string) => void onDocumentDelete: (id: string) => void } export function DocumentSidebar({ isSidebarOpen, setSidebarOpen, onDocumentSelect, documents, onDocumentRename, onDocumentDelete, }: DocumentSidebarProps) { const [editingId, setEditingId] = useState(null) const [editingTitle, setEditingTitle] = useState("") const createNewDocument = () => { const newDoc = api.createDocument("Untitled", "") onDocumentSelect(newDoc.id) } const startEditing = (id: string, title: string) => { setEditingId(id) setEditingTitle(title) } const handleRename = (id: string) => { onDocumentRename(id, editingTitle) setEditingId(null) } if (!isSidebarOpen) return null return (

{/* Workspace Header */}

{/* Search and Quick Actions */}

{/* Flexible Organization */} Notes Docs

Quick Notes

{documents.map((doc) => ( ))}

Documentation

{documents.map((doc) => ( ))} {/* Footer */}

) } interface DocumentItemProps { doc: ReturnType[number] onSelect: (id: string) => void onRename: (id: string, newTitle: string) => void onDelete: (id: string) => void editingId: string | null setEditingId: (id: string | null) => void editingTitle: string setEditingTitle: (title: string) => void } function DocumentItem({ doc, onSelect, onRename, onDelete, editingId, setEditingId, editingTitle, setEditingTitle, }: DocumentItemProps) { const handleRename = (id: string) => { onRename(id, editingTitle) setEditingId(null) } return (

{editingId === doc.id ? ( ) : ( <> )}

) }

About

Tags

Share

About

Tags

Share

More from chinpeerapat

More Templates Like This